import React,{Component} from 'react';
import './main.scss';
import Swiperr from './swiperr';
import Visible from './visible';
import axios from 'axios';


class Main extends Component{
    //设置初始值
    constructor(){
        super();
        this.state = {
            swiperList : [],
            fourList : [],
            towList : [],
            mmmooList:[],
            xianshiList:[],
            xxxxList:[],
            xxxx2List:[],
            miaoShashujuaent:0,
            miaoShashujunow:0,
            miaoShaShujuUp:0,
            TimeTiem1:'',
            TimeTiem2:'',
            TimeTiem3:''
            }
    }
    
    componentDidMount(){

        let _this = this

        axios.get('aladdin/get_batch_data?codes=["chajian"]&version=&app_channel=wap&plat=wap&access_token=&device_id=c468b5d0-0e2b-11e9-879c-23510929cfea').then(res=>{
            // console.log(res);
            this.setState({
				swiperList:res.data.data.chajian.datas
			})
        })
        axios.get('aladdin/get_batch_data?codes=["new_header","new_Home_topBig_forcase_180105_1","new_Home_4navs_180105_1","new_Home_coupon_180105_4","Home_pingo_170505_5","Home_AboveTopic_activity_170505_7","Home_TopicCase_170505_7","Home_CategaryNavs_170505_7"]&version=&app_channel=wap&plat=wap&access_token=&device_id=e43436e0-0efe-11e9-921f-df58425a56bc').then(resp=>{
            // console.log(resp.data.data.Home_TopicCase_170505_7.datas);
            this.setState({
                fourList:resp.data.data.new_Home_4navs_180105_1.datas,
                towList:resp.data.data.new_Home_coupon_180105_4.datas,
                mmmooList:resp.data.data.Home_TopicCase_170505_7.datas
            })
        })
        axios.get('activity/specials/info?count=8&code=Home_flashSale__Top_Img&device_id=c468b5d0-0e2b-11e9-879c-23510929cfea').then(resp=>{
            // console.log(resp.data.data.specials_info_d_t_o.end_time);
            // console.log(resp.data.data)
            this.setState({
                xianshiList:resp.data.data.specials_item_v_o_s,
                miaoShashujuaent:resp.data.data.specials_info_d_t_o.end_time,
                miaoShashujunow:resp.data.data.now,
                miaoShaShujuUp:resp.data.data.specials_info_d_t_o.end_time - resp.data.data.now
            })
        })
        axios.get('item/ws/group_list?current_page=1&page_size=24&group_id=12779&device_id=c468b5d0-0e2b-11e9-879c-23510929cfea').then(resp=>{
            // console.log(resp.data.data.item_list);
            this.setState({
                xxxxList:resp.data.data.item_list
            })
        })
        axios.get('item/ws/group_list?current_page=1&page_size=24&group_id=12780&device_id=c468b5d0-0e2b-11e9-879c-23510929cfea').then(resp=>{
            // console.log(resp.data.data.item_list);
            this.setState({
                xxxx2List:resp.data.data.item_list
            })
            
        })
        // console.log("现在的时间戳",new Date().getTime())
       


        setInterval(()=>{
            this.setState({
                miaoShaShujuUp: this.state.miaoShaShujuUp - 1000
            })
            let time =  this.state.miaoShaShujuUp;
            let second =parseInt((time/1000)%(60*60*24)%3600%60);
            let minute =parseInt((time/1000)%(60*60*24)%3600/60);
            let hour =parseInt((time/1000)%(60*60*24)/3600);

            let TimeTiem1 = _this.timeUp(hour);
            let TimeTiem2 = _this.timeUp(minute);
            let TimeTiem3 = _this.timeUp(second);
           
            this.setState({
                TimeTiem1:TimeTiem1,
                TimeTiem2:TimeTiem2,
                TimeTiem3:TimeTiem3
            })
            
            // console.log("倒计时：",_this.timeUp(hour)+":"+_this.timeUp(minute)+":"+_this.timeUp(second))
            
            //  this.setState({
                //  miaoShaShujuUp:miaoShaShujuUp-1000,

            //  })
           
            // let nowTime = this.state.miaoShashujunow;
            // console.log(nowTime);
           
            // this.setState({
            //     // miaoShashujunow:nowTime-1000
            // })
            // console.log(nowTime);
            // let mmmTime = (end_time - nowTime) / 1000;
            // let ohour = parseInt(mmmTime / 60 / 60 % 24);
            // let daomm_M = parseInt(mmmTime / 60 % 60);
            // let daomm_s = parseInt(mmmTime % 60);
            // let truetime =  ohour + ':' + daomm_M + ':' + daomm_s;
            // console.log(truetime)
           

        },1000)
    }

    timeUp=(date)=>{
        if(date<10){
            return "0"+date
        }else{
            return date
        }
    }

    mmmmsFunc=()=>{
        this.props.history.push('/mmms')
        // console.log("shfkashfkjsahfkjsa")
    }
    //组件未渲染完成，就销毁时的报错的解决方式
	componentWillUnmount(){
		this.setState=(state,callback)=>{
			return;
		}
	}
    render(){
        return (
            <div className='main_top1'>
                
                <Visible />
               
                <div className='main-comtent' onClick={this.mmmmsFunc}>
                    <img alt="ddd" src="https://image.watsons.com.cn//upload/dc0869f4.jpg"/>                    
                    <img alt='ddd' src="https://image.watsons.com.cn//upload/8e50f2e3.png" className="ddddimg"/>                   
                </div>
                <ul className="main_ul1">
                    {
                        
                        this.state.fourList.map((item,key)=><li key={key}>
                            <img src={item.image_url} alt={item.id}/>
                        </li>)
                    }
                </ul>
                <ul className="main_ul2">
                    {
                        this.state.towList.map((item,key)=><li key={key}>
                            <img src={item.image_url} alt={item.id}/>
                        </li>)
                    }
                </ul> 
                <div className="main_dddd1">    
                    <div className="main_div3_1">
                            今日秒杀：<div>{this.state.TimeTiem1}</div>:<div>{this.state.TimeTiem2}</div>:<div>{this.state.TimeTiem3}</div>                            
                        </div>        
                    <div className="main_div3">
                        
                        <ul className="main_div_ul3">
                            {
                                this.state.xianshiList.map((item,key)=><li key={key}>
                                    <img src={item.image_url} alt={item.id}/>
                                </li>)
                            }
                        </ul>
                    </div>
                </div>   
                <div className="main_div4">
                    <img src="https://image.watsons.com.cn//upload/491f7964.jpg" alt="dd" className="main_div4_img2"/>
                    <div></div>
                    <img src="https://image.watsons.com.cn//upload/f2a33fb4.gif" alt="dd" className="main_div4_img2"/>
                    <img src="https://image.watsons.com.cn//upload/3247a6b0.jpg" alt="dd" className="main_div4_img2"/>
                </div>
                <div className="main_div4-5">
                    <ul>
                        {
                            this.state.xxxxList.map((item,key)=><li key={key}>
                                <img src={item.over_image_url} alt="dd"/>
                            </li>)
                        }
                    </ul>
                </div>
                <Swiperr swiperList={this.state.swiperList} />
                <div className="main_div5">
                    <img src='https://image.watsons.com.cn//upload/5d0d63f6.jpg' alt="dd" className="main_div5_img"/>
                    <img src='https://image.watsons.com.cn//upload/b8ee0f79.jpg' alt="dd" className="main_div5_img"/>
                </div>
                <div className="main_div6">
                    <ul>
                        {
                            this.state.xxxx2List.map((item,key)=><li key={key}>
                                <img src={item.over_image_url} alt="dd"/>
                            </li>)
                        }
                    </ul>
                </div>
                <div className="main_div7" onClick={this.mmmmsFunc}>
                    <img src="https://image.watsons.com.cn//upload/3965e404.jpg" alt="ss"/>
                </div>
                <div className="main_div10">
                    <ul>
                        {
                            this.state.mmmooList.map((item,key)=><li key={key}>
                                <img src={item.image_url} alt="ddd" />
                            </li>)
                        }
                    </ul>
                </div>
            </div>           
        )
    }
}
export default Main;